<template>
	<view class="particulars" v-cloak>
		<view class="header">
			<view class="main">
				<view class="box">
					<view class="content">
						<view class="img">
							<image v-if="d.order.order_state == 40" src="/static/icon/ywc.png"></image>
							<image v-if="d.order.order_state == 30" src="/static/order/dqr.png"></image>
							<image v-if="d.order.order_state == 20" src="/static/order/dds.png"></image>

						</view>
						<view class="text">
							<view class="title" v-if="d.order.order_state == 20">待打扫</view>
							<view class="title" v-if="d.order.order_state == 30">待确认</view>
							<view class="title" v-if="d.order.order_state == 40">已完成</view>
							<view class="time" v-if="d.order.order_state == 20">{{d.order_status.create_time}}</view>
							<view class="time" v-if="d.order.order_state == 30">{{d.order_status.clean_time}}</view>
							<view class="time" v-if="d.order.order_state == 40">{{d.order_status.finish_time}}</view>
						</view>
					</view>
					<view class="btn">
						<view class="btn1" v-if="d.order.order_state == 20" @tap="close(d)">取消订单</view>
						<view class="btn2" v-if="d.order.order_state == 20" @tap="orderFulfillment(d)">已打扫</view>
						<view class="btn2" v-if="d.order.order_state == 30" @tap="remindConfirm(d)">提醒确认</view>
					</view>
				</view>
			</view>
		</view>
		<view class="sweep">
			<view class="title">房间信息</view>
			<view class="room"  scoped="nbsp" >{{d.order.room_no}}{{d.order.room_type}} {{d.order.storey}}楼</view>
			<view class="cost" scoped="nbsp">{{d.order.roomtype}} {{d.order.real_amount}}元</view>
			<view class="bg"></view>
			<view class="bommon">
				<view class="img">
					<image src="/static/icon/time.png"></image>
				</view>
				<view class="time">预约到店: {{d.order.subscribe_time }}</view>
			</view>
		</view>
		<view class="bg"></view>
		<!-- // subscribe_time   订单创建时间   (待接单)
				// create_time     接单时间       (待打扫)
				// arrive_time     保洁到店时间    (待打扫)
				// clean_time     保洁完成时间    (待确认)
				// finish_time     订单完成时间    (已完成) -->
		<view class="order_info">
			<view class="title">订单信息</view>
			<view class="item">订单编号：
				<view class="text" v-if="d.order.order_sn">{{d.order.order_sn}}</view>
			</view>
			<view class="item" v-if="d.order_status.finish_time">完成时间：
				<view class="text">{{d.order_status.finish_time}}</view>
			</view>
			<view class="item" v-if="d.order_status.clean_time">打扫时间：
				<view class="text">{{d.order_status.clean_time}}</view>
			</view>
			<view class="item" v-if="d.order_status.arrive_time">到店时间：
				<view class="text">{{d.order_status.arrive_time}}</view>
			</view>
			<view class="item" v-if="d.order_status.create_time">抢单时间：
				<view class="text">{{d.order_status.create_time}}</view>
			</view>
			<view class="item" v-if="d.order.create_time">发布时间：
				<view class="text">{{d.order.create_time}}</view>
			</view>
		</view>
		<view class="bg" v-if="d.order_status.cname"></view>
		<layer v-if="layerShow">
			<view slot="text1">
				提示
			</view>
			<view slot="text2">
				{{layerTitle}}
			</view>
			<view slot="btn1" @tap="layerClose">取消</view>
			<view slot="btn2" @tap="layerFinish">确定</view>
			
		</layer>
	</view>
</template>

<script>
	import layer from "@/components/layer/layer.vue";
	export default {
		data() {
			return {
				layerShow: false,
				layerTitle: ''
			}
		},
		components: {
			layer
		},
		props: ['d'],
		methods: {
			lookCleaner(e) {
				uni.showToast({
					title: "查看" + e + "详情",
					icon: "none"
				})
			},
			remindConfirm(){
				this.req({
					url:'both/remindConfirm',
					id:this.d.order_status.id,
					method:'get'
				},(res)=>{
					if(res.data.status == 1){
						uni.showToast({
							icon:'none',
							title:'已经提醒店方'
						})
					}else{
						uni.showToast({
							icon:'none',
							title:res.data.message
						})
					}
				},(res)=>{
					uni.showToast({
						icon:'none',
						title:'服务器繁忙,请稍后重试'
					})
				})
			},
			btn(e) {
				console.log(e)
				if (e.btn == '取消订单') {
					this.req({
						url: 'both/delOrder',
						method: 'GET',
						data: {
							hid: e.order.hid,
							id: e.order.id
						}
					}, (res) => {
						console.log(res.data.title)
						uni.navigateBack({
							delta: 1
						});
					})
					return;
				}
				if (e.btn == '确认完成') {
					this.req({
						url: 'both/finishOrder',
						method: 'GET',
						data: {
							hid: e.order.hid,
							order_data: '["' + e.order.id + '"]'
						}
					}, (res) => {
						if (res.data.status == 1) {
							console.log('确认完成')
						}
					})
					return;
				}
			},
			orderFulfillment(item) {
				let orderArr = JSON.stringify([item.order_status.id]);
				this.layerTitle = '已打扫确认';
				this.openlayer(async () => {
					
						let res = await this.finishClean(orderArr);
						if (res.data.status == 1) {
					
							uni.showToast({
								icon: 'none',
								title: '已打扫完成'
							});
					
							uni.redirectTo({
								url: '/pages/cleaner/order/my_order?type=' + '1',
								"animationType": this.GLOBAL.openAnimation,
								"animationDuration": this.GLOBAL.animationTime
							});
						} else {
							uni.showToast({
								icon: 'none',
								title: res.data.message
							});
						}
					
				});


			},
			/**
			 * 订单完成
			 * 
			 */
			finishClean(orderArr) {
				return new Promise((res) => {
					this.req({
						url: 'both/finishClean',
						method: 'get',
						data: {
							cid: this.isLogin().id,
							order_data: orderArr
						}
					}, (data) => {
						res(data);
					});
				})
			},
			/**
			 * 删除按钮
			 */
			close(item) {
				this.layerTitle = '确定取消订单么?';
				this.openlayer(async () => {


					let res = await this.detelData(item.order_status.id);

					if (res.data.status == 1) {



						uni.showToast({
							icon: 'none',
							title: '已取消',
						});

						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							});
						}, 500);



					} else {

						uni.showToast({
							icon: 'none',
							title: '取消失败,请稍后重试'
						});

					}


				});

				//  uni.showModal({
				// 	content: '是否取消本条订单？',
				// 	success: async (res1) => {
				// 		if (res1.confirm) {}
				// 		
				// 	},
				// 	
				// })


			},
			/**
			 * 取消订单
			 */
			detelData(id) {

				return new Promise((res) => {

					this.req({
						url: 'both/cancelOrder',
						method: 'get',
						data: {
							id: id,
							position: 1,
							uid: this.isLogin().id
						}
					}, (data) => {
						res(data)
					})

				})
			},
			/**
			 * 蒙层返回完成
			 */
			layerFinish() {


			},
			/**
			 * 关闭蒙层
			 */
			layerClose() {
				this.layerShow = false;
			},
			/**
			 * 打开蒙层
			 */
			openlayer(callback) {
				this.layerShow = true;
				this.layerFinish = () => {
					this.layerClose();
					callback();
				}
			}
		}
	}
</script>
<style scoped lang="scss">
	
	.particulars {
		width: 750upx;
		color: #333333;
		background: #FFFFFF;
		.header {
			width: 100%;
			box-sizing: border-box;
			height: 240upx;
			background-color: #3595f9;
			padding: 8upx 24upx 40upx 24upx;

			.main {
				width: 100%;
				height: 100%;
				background-color: #ffffff;
				border-radius: 8upx;
				display: flex;
				align-items: center;
				justify-content: center;

				.box {
					width: 586upx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.content {
						display: flex;
						align-items: center;

						.img {
							width: 80upx;
							height: 80upx;
							background-color: #3595f9;
							border-radius: 50%;
							margin-right: 18upx;

							image {
								width: 80upx;
								height: 80upx;
								border-radius: 50%;
								vertical-align: top;
							}
						}

						.text {
							.title {
								font-size: 28upx;
								line-height: 46upx;
							}

							.time {
								font-size: 20upx;
								line-height: 38upx;
								color: #999999;
							}
						}
					}

					.btn {
						font-size: 24upx;
						text-align: center;
						line-height: 60upx;

						.btn1 {
							width: 160upx;
							height: 60upx;
							border-radius: 8upx;
							border: solid 1upx #e5e5e5;
							color: #999999;
						}

						.btn2 {
							width: 160upx;
							height: 60upx;
							border-radius: 8upx;
							border: solid 1upx #3595f9;
							color: #3595f9;
							margin-top: 20upx;
						}
					}
				}
			}
		}

		.sweep {
			width: 100%;
			padding: 18upx 24upx 48upx 24upx;
			box-sizing: border-box;
			height: 314upx;

			.title {
				font-size: 32upx;
				line-height: 62upx;
			}

			.room {
				font-size: 28upx;
				line-height: 58upx;
			}

			.cost {
				font-size: 30upx;
				line-height: 60upx;
			}

			.bg {
				width: 702upx;
				height: 1upx;
				background-color: #e5e5e5;
				transform: scaleY(0.5);
			}

			.bommon {
				display: flex;
				align-items: flex-end;
				height: 52upx;

				.img {
					width: 30upx;
					height: 30upx;
					margin-right: 16upx;
					border-radius: 50%;

					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
						vertical-align: top;
					}
				}

				.time {
					font-size: 24upx;
					color: #999999;
				}
			}
		}

		.bg {
			width: 750upx;
			height: 20upx;
			background-color: #f0f0f0;
		}

		.order_info {
			width: 100%;
			padding: 18upx 24upx 48upx 24upx;
			box-sizing: border-box;
			height: auto;

			.title {
				font-size: 32upx;
				line-height: 62upx;
			}

			.item {
				display: flex;
				font-size: 28upx;
				line-height: 58upx;

				.text {
					color: #999999;
				}
			}
		}

		.userCleaner {
			width: 100%;
			padding: 15upx 24upx 100upx 24upx;
			box-sizing: border-box;
			height: auto;

			.title {
				font-size: 32upx;
				line-height: 82upx;
			}

			.user_box {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.left {
					line-height: 58upx;
					font-size: 28upx;

					.left_item {
						display: flex;
						align-items: center;

						image {
							width: 30upx;
							height: 30upx;
							margin-right: 10upx;
							display: block;
						}

						.text {
							vertical-align: middle;
						}
					}
				}

				.user_btn {
					width: 160upx;
					height: 60upx;
					border-radius: 8upx;
					color: #3595f9;
					font-size: 24upx;
					text-align: center;
					line-height: 60upx;
					border: solid 1upx #3595f9;
				}
			}
		}
	}
</style>
